/* eslint-disable react/jsx-pascal-case */
import React from 'react'

const UseReducer = () => {
	// useState => useReducer是它替代版,第一个参数为方法，第二个参数为默认值
	const [count, CountChange] = React.useReducer((state, action) => {
		// action为CountChange的参数
		switch (action) {
			// 如果参数是add则返回state + 1
			case 'add':
				return state + 1
			case 'sub':
				return state - 1

			default:
				break
		}
	}, 0)

	return (
		<>
			<div className="nav2">
				<h4>9.useReducer的使用(这是userState的另一种方法,可有可无)</h4>
				<h1>{count}</h1>
				<React.$vant.Button onClick={() => CountChange('add')}>
					自增
				</React.$vant.Button>
				<React.$vant.Button onClick={() => CountChange('sub')}>
					减少
				</React.$vant.Button>
			</div>
		</>
	)
}

export default UseReducer
